<div style="width: 100%;">
  <div nz-row nzJustify="center" style="text-align: center;margin: 0 auto; margin-bottom: 20px;">
    <div class="textShow" nz-col [nzSpan]="isSmaller ? 24:20" style="animation: bgcChange 4s infinite alternate;">
      <div nz-col nzSpan='6' style="display: inline-block;"><h1 style="color: white;">EricBlog</h1></div>
      <br>
      <div nz-col nzSpan='6' style="display: inline-block;"><h1 style="color: white;">Designed By</h1></div>
      <br>
      <div nz-col nzSpan='24' class="imgBox">
          <a href="https://ng.ant.design/docs/introduce/zh"><img src="https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg" alt=""></a>
          <span style="font-size: 30px;color: white;">+</span>
          <a href="https://angular.io/"><img src="https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg" alt=""></a>
      </div>
    </div>
    </div>
  
    <!-- 分类栏区域 -->
    <div nz-row nzJustify="center" nzAlign='middle' style="height: 10%;">
      <div class="classSelect" nz-col [nzSpan]='isSmaller ? 6:5' style="height: 100px;line-height: 100px;color: white;font-size: 30px;text-align: center;">生活</div>
      <div class="classSelect" nz-col [nzSpan]='isSmaller ? 6:5' style="height: 100px;line-height: 100px;color: white;font-size: 30px;text-align: center;">笔记</div>
      <div class="classSelect" nz-col [nzSpan]='isSmaller ? 6:5' style="height: 100px;line-height: 100px;color: white;font-size: 30px;text-align: center;">前端</div>
      <div class="classSelect" nz-col [nzSpan]='isSmaller ? 6:5' style="height: 100px;line-height: 100px;color: white;font-size: 30px;text-align: center;">后端</div>
    </div>
  
    <!-- 留言区域 -->
    <div nz-row nzJustify="center" style="height: 160px;margin-bottom: 2%;">
      <div nz-col [nzSpan]="isSmaller ? 24:20" class="article" style="animation: bgcChange 4s infinite alternate;height: 100%;">
        <nz-carousel nz-col nzSpan='12' style="display: inline-block;" nzDotPosition='right' nzAutoPlay='true' nzDots='false'>
          <div class="nzCarouselLeft" nz-carousel-content  *ngFor='let item of message1'>
            <h3 class="messageBar">{{item.creater+'说过'}}</h3>
          </div>
        </nz-carousel>
        <nz-carousel class="messageBar" nz-col nzSpan='12' style="display: inline-block;" nzDotPosition='top' nzAutoPlay='true' nzDots='false'>
          <div class="nzCarouselRight" nz-carousel-content *ngFor='let item of message2'>
            <h3 class="messageBar">{{item.messages}}</h3>
          </div>
        </nz-carousel>
      </div>
    </div>
  
  <!-- 照片展示和数据统计 -->
  <div nz-row nzJustify="center" class="firstPageBottom" style="height: 502px">
    <div nz-col [nzSpan]='isSmaller?24:16'>
      <nz-carousel nzAutoPlay nzDots='false'>
        <div nz-carousel-content style="width: 100%;height: 100%;">
          <img style="width: 100%;height: 100%;object-fit: cover;" src="../../../assets/images/inedxphoto1.JPG" alt="">
        </div>
        <div nz-carousel-content style="width: 100%;height: 100%;">
          <img style="width: 100%;height: 100%;object-fit: cover;" src="../../../assets/images/indexphoto2.JPG" alt="">
        </div>
        <div nz-carousel-content style="width: 100%;height: 100%;">
          <img style="width: 100%;height: 100%;object-fit: cover;" src="../../../assets/images/indexphoto3.JPG" alt="">
        </div>
      </nz-carousel>
    </div>
    <div nz-col [nzSpan]='isSmaller?0:4' style="animation: bgcChange2 4s infinite alternate;">
      <nz-carousel nzAutoPlay nzDots='false' style="text-align: center;">
        <div nz-carousel-content style="width: 100%;height: 100%;">
          秋天
        </div>
        <div nz-carousel-content style="width: 100%;height: 100%;">
          玉龙雪山
        </div>
        <div nz-carousel-content style="width: 100%;height: 100%;">
          堆雪人
        </div>
      </nz-carousel>
    </div>
  </div>
</div>


<!-- 推荐阅读区域 -->
<div nz-row nzJustify="center" style="width: 100%;margin-top: 2%;">
  <div nz-col [nzSpan]="isSmaller ? 24:20" class="article" style="animation: bgcChange2 4s infinite alternate;height: 100%;text-align: center;" >
    <h1 style="color: white;">推荐阅读</h1>
    <div nz-col nzSpan='24' *ngFor="let item of article">
      <div class="articleBox">
        <nz-card nzHoverable [nzLoading]='' nzTitle="{{item.title}}">
          <p>{{'作者：'+item.artist}}</p>
          <p>{{'日期'+item.date}}</p>
          <p><i nz-icon nzType="eye" nzTheme="outline"></i><span>{{'：'+item.viewed}}</span></p>
        </nz-card>
      </div>
    </div>
    
  </div>
</div>


<!-- <div nz-row class="footer">
    <div class="step" nz-col nzSpan='18' style="margin: 10% auto;">
      <nz-divider [nzText]="text">
        <ng-template #text>
          <i nz-icon nzType="rise" nzTheme="outline"></i>
          项目进度
        </ng-template>
      </nz-divider>
      <nz-steps [nzCurrent]="1">
          <nz-step nzTitle={{v.steps}} nzStatus={{v.status}} nzDescription={{v.task}} *ngFor='let v of steps'></nz-step>
        </nz-steps>
    </div>
</div> -->
